<template>
  <div class="app-container">
    <div class="content-box">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="120px"
      >
        <el-form-item label="退款id" prop="refund_id">
          <el-input
            v-model="queryParams.refund_id"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="订单号" prop="order_sn">
          <el-input
            v-model="queryParams.order_sn"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="退货/退款单号" prop="refund_sn">
          <el-input
            v-model="queryParams.refund_sn"
            placeholder="请输入"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="退款金额" prop="min_refund_price">
          <div class="wrap_input" style="width: 240px">
            <el-input
              v-model="queryParams.min_refund_price"
              placeholder="最小退款金额"
              clearable
              size="small"
              style="width: 100%"
              class="input_auto"
            />
            -
            <el-input
              v-model="queryParams.max_refund_price"
              placeholder="最大退款金额"
              clearable
              size="small"
              style="width: 100%"
              class="input_auto"
            />
          </div>
        </el-form-item>
        <el-form-item label="退款类型" prop="refund_type">
          <el-select
            v-model="queryParams.refund_type"
            placeholder="请选择"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              :label="item"
              :value="index"
              :key="index"
              v-for="(item, index) in mapp_list.refund_type"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="退款状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择"
            size="small"
            style="width: 240px"
            clearable
          >
            <el-option
              :label="item"
              :value="index"
              :key="index"
              v-for="(item, index) in mapp_list.status"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createtime">
          <el-date-picker
            v-model="queryParams.createtime"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="updatetime">
          <el-date-picker
            v-model="queryParams.updatetime"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table :data="menuList" row-key="refund_id">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="refund_id" min-width="60" align="center" label="ID">
        </el-table-column>

        <el-table-column
          prop="refund_sn"
          min-width="140"
          align="center"
          label="退款单号"
        >
        </el-table-column>
        <el-table-column
          prop="refund_price"
          min-width="100"
          align="center"
          label="退款金额"
        >
        </el-table-column>
        <el-table-column
          prop="refund_type_text"
          min-width="140"
          align="center"
          label="退款类型"
        >
        </el-table-column>
        <el-table-column
          prop="status_text"
          min-width="100"
          align="center"
          label="退款状态"
        >
        </el-table-column>

        <el-table-column
          prop="createtime"
          width="100"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="updatetime"
          width="100"
          align="center"
          label="更新时间"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button size="small" @click="toInfo(scope.row.refund_id)"
              >详情</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="examine(1, scope.row.id)"
              v-if="scope.row.status == 1"
              >通过</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="examine(2, scope.row.id)"
              v-if="scope.row.status == 1"
              >驳回</el-button
            >
            <el-button
              size="small"
              v-if="scope.row.status == 5"
              @click="confirmReceipt(scope.row.id)"
              >确认收货</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="totalPage > 0"
        :total="totalPage"
        :page="queryParams.page"
        :limit="queryParams.pageSize"
        @pagination="changepage"
      />
    </div>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="popup"
      >
        <el-form-item
          label="同意理由"
          prop="agree_reason"
          v-if="form.check == 1"
        >
          <el-input v-model="form.agree_reason" placeholder="请输入同意理由" />
        </el-form-item>
        <el-form-item label="拒绝理由" prop="refuse_reason" v-else>
          <el-input v-model="form.refuse_reason" placeholder="请输入拒绝理由" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination";
import {
  yinseSearch,
  listrefund,
  // updatecheck,
  // Receipt,
} from "@/api/chargebackList";
export default {
  name: "AfterSale",
  components: {
    pagination,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 菜单表格树数据
      menuList: [],
      // 菜单树选项
      menuOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 显示状态数据字典
      visibleOptions: [],
      // 菜单状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        refund_id: undefined,
        refund_sn: undefined,
        min_refund_price: undefined,
        max_refund_price: undefined,
        refund_type: undefined,
        status: undefined,
        goods_sn: undefined,
        sku_sn: undefined,
        bar_code: undefined,
        goods_title: undefined,
        createtime: [],
        updatetime: [],
        page: 1,
        pageSize: 10,
        order_sn: "",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        menuName: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
        ],
        path: [
          { required: true, message: "路由地址不能为空", trigger: "blur" },
        ],
      },
      activeName: "first",
      order_create: "",
      popSty: false,
      textarea: "",
      totalPage: 0,
      mapp_list: [], //需要选择的搜索映射
    };
  },
  created() {
    this.getmapping_list();
    this.getList();
  },
  methods: {
    // 查看详情
    toInfo(id) {
      if(id){

       this.$router.push({
        path: "/orderManagement/chargebackDateil/" + id,
      });
      }
    },
    // 确认收货
    confirmReceipt(id) {
      Receipt({ refund_id: id }).then((res) => {
        this.getList();
      });
    },
    // 同意或拒绝申请
    examine(data, id) {
      this.reset();
      this.open = true;
      this.form.check = data;
      this.form.id = id;
      if (data == 1) {
        this.title = "同意申请";
      } else {
        this.title = "拒绝申请";
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        refuse_reason: "",
        agree_reason: "",
        id: "",
      };
    },

    // 分页
    changepage(e) {
      this.queryParams.page = e.page;
      this.queryParams.pageSize = e.limit;
      this.getList();
    },
    // 获取映射数据
    getmapping_list() {
      yinseSearch({}).then((res) => {
        this.mapp_list = res.data;
      });
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = false;
      let data = this.queryParams;
      console.log(data);
      let info = {
        page: data.page,
        pageSize: data.pageSize,
      };
      if (data.refund_id) {
        info.refund_id = data.refund_id;
      }

      if (data.refund_sn) {
        info.refund_sn = data.refund_sn;
      }
      if (data.refund_type) {
        info.refund_type = data.refund_type;
      }
      if (data.goods_sn) {
        info.goods_sn = data.goods_sn;
      }
      if (data.sku_sn) {
        info.sku_sn = data.sku_sn;
      }
      if (data.bar_code) {
        info.bar_code = data.bar_code;
      }
      if (data.goods_title) {
        info.goods_title = data.goods_title;
      }
      if (data.status) {
        info.status = data.status;
      }
      if (data.min_refund_price) {
        info.min_refund_price = parseFloat(data.min_refund_price);
      }
      if (data.max_refund_price) {
        info.max_refund_price = parseFloat(data.max_refund_price);
      }

      if (data.createtime.length > 0) {
        info.start_createtime = data.createtime[0];
        info.end_createtime = data.createtime[1];
      }
      if (data.updatetime.length > 0) {
        info.start_updatetime = data.updatetime[0];
        info.end_updatetime = data.updatetime[1];
      }
      listrefund(info).then((res) => {
        this.menuList = res.data.list;
        this.totalPage = res.data.total_page;
        this.loading = false;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let info = {
            refund_id: this.form.id,
            check: this.form.check,
          };
          if (this.form.check == 1) {
            info.agree_reason = this.form.agree_reason;
          } else {
            info.refuse_reason = this.form.refuse_reason;
          }
          updatecheck(info).then((response) => {
            this.getList();
            this.reset();
            this.open = false;
          });
        }
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      (this.queryParams = {
        refund_id: undefined,
        refund_sn: undefined,
        min_refund_price: undefined,
        max_refund_price: undefined,
        refund_type: undefined,
        status: undefined,
        createtime: [],
        updatetime: [],
        page: 1,
        pageSize: 10,
      }),
        this.handleQuery();
    },
  },
};
</script>
<style lang="scss">
.input_auto .el-input__inner {
  width: 100%;
}
</style>
<style lang="scss" scoped>
.input_auto {
  width: auto;
}
.el-form-item {
  // width: 30%;
}
.popup .el-form-item {
  width: 85%;
}
.el-form-item__label {
  width: 100px;
}
.el-input--small .el-input__inner {
  width: 240px;
}
.wrap_input {
  width: 240px;
  display: flex;
  justify-content: space-between;
  .el-input--small {
    flex-grow: 1;
    flex-shrink: 1;
  }
  .el-input--small .el-input__inner {
    width: 100%;
  }
}
</style>
